<template>
  <div>
 <el-card>
<el-row :gutter="20">
  <el-col :span="22"><el-button type="primary"  plain>当前审批中 0 本月审批通过 1 本月审批驳回 0</el-button></el-col>
  <el-col :span="2"><el-button size='mini' type='primary'>流程设置</el-button></el-col>
</el-row>
 </el-card>
 <!-- table -->
<el-card>
  <Tabel
  :tableData='tableData'
   :width='width'
   border="border"
   :tableColum='tableColum'
    :multipleSelection='multipleSelection'
    @rowoperation='rowoperation'
  
 ></Tabel>
</el-card>
 <!--  -->
 <!--  -->
 <Page
         :total='total'
         :currentPage='queryInfo.page'
         :pageSize='queryInfo.size'
         @handleSizeChange='handleSizeChange'
         @handleCurrentChange='handleCurrentChange'
 ></Page>

 <!-- 详情对话框 -->
 <el-dialog
  title=""
  :visible.sync="dialogVisible"
  width="70%"
  :before-close="handleClose">
  <div>
  <el-row :gutter="20">
  <el-col :span="18">
  <div>
  <h3>申请</h3>
  <div class="leave">
  <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
  <div><h4>{{rowData.username}}</h4>
  <p>部门：{{rowData.departmentName}}</p>
   <p>入职时间： {{rowData.timeOfEntry  | dateFormat}}</p> 
   <!-- <pre>{{procData}}</pre> -->
  <div class="box">
    <div v-if="procData.processName">
      <div>申请类型: |  <span>{{procData.processName}}</span></div>
     </div>
     <div v-if="procData.reason">
      <div>申请事由: |  <span>{{procData.reason}}</span></div>
     </div>
     <div v-if="procData.holidayType">
      <div>申请单位: |  <span>{{procData.holidayType}}</span></div>
     </div>
     <div v-if="procData.duration">
      <div>申请类型: |  <span>{{procData.duration}}</span></div>
     </div>
     <div v-if="procData.processKey">
      <div>开始时间: |  <span>{{procData.processKey}}</span></div>
     </div>
     <div v-if="procData.endTime">
      <div>结束时间: |  <span>{{procData.endTime}}</span></div>
     </div>
     <div v-if="procData.duration">
      <div>申请类型: |  <span>{{procData.duration}}</span></div>
     </div>
  </div>
   <div>
   
   </div>
  </div>
 
  </div>
   <hr>
  </div>
  </el-col>
  <el-col :span="6"><div>
   <h4>申请记录</h4>
  </div></el-col>
</el-row>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import Tabel from '@/components/global/table' 
import {process} from '@/api/http'
import Page from '@/components/global/page'
export default {
components:{Tabel,Page},
data() {
    return {
         tableData:[],
          tableColum:[{
        prop:'processName',
        lable:'审批类型',

      },
      {
        prop:'username',
        lable:'申请人',
       

      },
      {
        prop:'procCurrNodeUserName',
        lable:'当前审批人',
      

      },
       {
        prop:'timeOfEntry',
        lable:'审批发起时间',
        type:'data',
      

      },
       {
        prop:'processState',
        lable:'审批状态',
        type:'change',
        data:[{
            lable:'审批通过',
            value:'1'

        },
        {
            lable:'审批中',
            value:'2'

        },
        {
            lable:'	撤销',
            value:'4'

        }
        ],
      

      },
       {
        prop:'departmentName',
        lable:'部门',
      

      },
       
   
 {
  lable:'操作',
  type:'opt',
  size:'mini',
  operations:[{
    label:'查看',
    method:'check',
    type:'primary'
  },
  
]
 },



      ],
      queryInfo:{
       size:10,
       page:1,
       body:{
        departmentId:'',
        departmentName	:'',
        procApplyTime:'',
        procCurrNodeUserId:'',
        procCurrNodeUserName:'',
        procData:'',
        procEndTime:'',
        processDefinitionId:'',
        processId:'',
        processKey:'',
        processName:'',
        processState:'',
        timeOfEntry:'',
        userId:'',
        username:''
       }
      },
      total:0,
      dialogVisible:false,
      rowData:[],
      procData:[]

    }
},
methods: {
async    getProcess(){
     const {data:res} = await process(this.queryInfo.page,this.queryInfo.size,{data:this.queryInfo.body}) 
     console.log(res)
     this.tableData = res.data.rows
     this.total = res.data.total
    },
    // 分页
     handleSizeChange(val){
        console.log('父',val)
        // const size = this.queryInfo.size -0
        this.queryInfo.size = val
        this.getProcess()
      },
      handleCurrentChange(val){
          console.log('父',val)
           this.queryInfo.page = val
           this.getProcess()

      },

 // 操作按钮
    rowoperation(row,method){
      console.log('父组件',row,method)
       console.log(row.id)
      if(method==='check'){
        this.rowData = row
        this.procData = JSON.parse(row.procData) 
        this.dialogVisible = true
        // this.$router.push({path:'/approvals/leaveApproval', query:{id:row.processId}})
        
        // const res = await UserMsg(row.id)
        // console.log(res.data.data)
        // this.UserMsg = res.data.data 
        //  this.$router.push({path:'/user/detail', query:{id:row.id}})
      }
     

    },
},
created() {
  this.getProcess()
},
}
</script>

<style lang="less" scoped>
.el-card{
    width: 100%;
    margin-bottom: 20px;
}
.leave{
padding: 20px;
display: flex;
align-items: center;
img{
    width: 100px;
    height: 100px;
}
h4, p{
    padding: 10px 20px;
}
}
.box >div{
  color: #999;
  font-size: 18px;
 padding: 10px;
}
.box  span{
  color: #000000;
}

</style>